<template>
  <div class="container">
    <div class="main">
      <div class="team">
        <div class="title">{{ this.dataList1.title }}</div>
        <div class="data">
          <div
            v-for="(item, index) in getDataList1Census"
            :style="{
              color: item.number > 0 && item.isShow === 1 ? 'red' : '',
            }"
            class="item"
            @click="goRouter(item.path, item.query)"
          >
            <div class="item-title">{{ item.title }}</div>
            <div class="item-number">{{ item.number }}</div>
          </div>
        </div>
      </div>

      <div class="team">
        <div class="title">{{ this.dataList2.title }}</div>
        <div class="data">
          <div
            v-for="(item, index) in getDataList2Census"
            :style="{
              color: item.number > 0 && item.isShow === 1 ? 'red' : '',
            }"
            class="item"
            @click="goRouter(item.path, item.query)"
          >
            <div class="item-title">{{ item.title }}</div>
            <div class="item-number">{{ item.number }}</div>
          </div>
        </div>
      </div>

      <div class="team">
        <div class="title">{{ this.dataList3.title }}</div>
        <div class="data">
          <div
            v-for="(item, index) in getDataList3Census"
            :style="{
              color: item.number > 0 && item.isShow === 1 ? 'red' : '',
            }"
            class="item"
            @click="goRouter(item.path, item.query)"
          >
            <div class="item-title">{{ item.title }}</div>
            <div class="item-number">{{ item.number }}</div>
          </div>
        </div>
      </div>

      <div class="team">
        <div class="title">{{ this.dataList4.title }}</div>
        <div class="data">
          <div
            v-for="(item, index) in getDataList4Census"
            :style="{
              color: item.number > 0 && item.isShow === 1 ? 'red' : '',
            }"
            class="item"
            @click="goRouter(item.path, item.query)"
          >
            <div class="item-title">{{ item.title }}</div>
            <div class="item-number">{{ item.number }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { index } from "@/api/index";

export default {
  name: "Home",
  data() {
    return {
      dataList1: [],
      dataList2: [],
      dataList3: [],
      dataList4: [],
    };
  },
  computed: {
    getDataList1Census() {
      return [
        {
          ...this.dataList1.data.areaNum,
          path: "/Region",
          isShow: 0,
          query: {},
        },
        {
          ...this.dataList1.data.providerNum,
          path: "/ProviderInfo",
          isShow: 0,
          query: {},
        },
        {
          ...this.dataList1.data.memberNum,
          path: "/Member",
          isShow: 0,
          query: {},
        },
        {
          ...this.dataList1.data.todayRegisterMemberNum,
          path: "/Member",
          isShow: 0,
          query: {},
        },
        {
          ...this.dataList1.data.todayActiveMemberNum,
          path: "/Member",
          isShow: 0,
          query: {},
        },
        {
          ...this.dataList1.data.sessionNum,
          path: "/ProviderGroup",
          isShow: 0,
          query: {},
        },
      ];
    },
    getDataList2Census() {
      return [
        {
          ...this.dataList2.data.goodsNum,
          path: "/MallGoods",
          isShow: 0,
          query: {},
        },
        {
          ...this.dataList2.data.orderNum,
          path: "/MallOrder",
          isShow: 0,
          query: {},
        },
        {
          ...this.dataList2.data.orderFee,
          path: "/MallOrder",
          isShow: 0,
          query: {},
        },
        {
          ...this.dataList2.data.monthOrderNum,
          path: "/MallOrder",
          isShow: 0,
          query: {},
        },
        {
          ...this.dataList2.data.monthOrderFee,
          path: "/MallOrder",
          isShow: 0,
          query: {},
        },
        {
          ...this.dataList2.data.todayOrderNum,
          path: "/MallOrder",
          isShow: 0,
          query: {},
        },
        {
          ...this.dataList2.data.todayOrderFee,
          path: "/MallOrder",
          isShow: 0,
          query: {},
        },
        {
          ...this.dataList2.data.unDeliverOrderNum,
          path: "/MallOrder",
          isShow: 1,
          query: {
            status: 3,
          },
        },
      ];
    },
    getDataList3Census() {
      return [
        {
          ...this.dataList3.data.orderNum,
          path: "/Beehive",
          isShow: 0,
          query: {},
        },
        {
          ...this.dataList3.data.orderFee,
          path: "/Beehive",
          isShow: 0,
          query: {},
        },
        {
          ...this.dataList3.data.monthOrderNum,
          path: "/Beehive",
          isShow: 0,
          query: {},
        },
        {
          ...this.dataList3.data.monthOrderFee,
          path: "/Beehive",
          isShow: 0,
          query: {},
        },
        {
          ...this.dataList3.data.todayOrderNum,
          path: "/Beehive",
          isShow: 0,
          query: {},
        },
        {
          ...this.dataList3.data.todayOrderFee,
          path: "/Beehive",
          isShow: 0,
          query: {},
        },
        {
          ...this.dataList3.data.unDeliverOrderNum,
          path: "/Beehive",
          isShow: 1,
          query: {
            status: 3,
          },
        },
      ];
    },
    getDataList4Census() {
      return [
        {
          ...this.dataList4.data.goodsNum,
          path: "",
          isShow: 0,
          query: {},
        },
        {
          ...this.dataList4.data.orderNum,
          path: "/ProviderOrder",
          isShow: 0,
          query: {},
        },
        {
          ...this.dataList4.data.orderFee,
          path: "/ProviderOrder",
          isShow: 0,
          query: {},
        },
        {
          ...this.dataList4.data.monthOrderNum,
          path: "/ProviderOrder",
          isShow: 0,
          query: {},
        },
        {
          ...this.dataList4.data.monthOrderFee,
          path: "/ProviderOrder",
          isShow: 0,
          query: {},
        },
        {
          ...this.dataList4.data.todayOrderNum,
          path: "/ProviderOrder",
          isShow: 0,
          query: {},
        },
        {
          ...this.dataList4.data.todayOrderFee,
          path: "/ProviderOrder",
          isShow: 0,
          query: {},
        },
        {
          ...this.dataList4.data.unDeliverOrderNum,
          path: "/ProviderOrder",
          isShow: 1,
          query: {
            status: 3,
          },
        },
      ];
    },
  },
  created() {
    this.getData();
  },
  methods: {
    // 数据统计
    getData() {
      index().then((res) => {
        this.dataList1 = res.data[0];
        this.dataList2 = res.data[1];
        this.dataList3 = res.data[2];
        this.dataList4 = res.data[3];
      });
    },
    // 跳转
    goRouter(path, query) {
      this.$router.push({
        path: path,
        query: query,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;
  min-height: calc(100vh - 105px);

  .main {
    border-radius: 10px;

    .title {
      font-size: 22px;
      font-weight: bold;
    }

    .team {
      margin-bottom: 20px;
      background-color: white;
      padding: 30px;
      border-radius: 20px;

      .data {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-gap: 20px;
        margin-top: 20px;

        .item {
          border-radius: 5px;
          box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);
          text-align: center;
          padding: 10px;

          .item-title {
            font-size: 16px;
            line-height: 30px;
            color: #606266;
            text-align: center;
          }

          .item-number {
            font-size: 35px;
            line-height: 100px;
          }

          .item-number:hover {
            cursor: pointer;
          }
        }

        .red {
          color: red;
          border: 1px solid #e2e2e2;
        }
      }
    }
  }
}
</style>
